<script setup>
import {inject} from "vue";
import {useRouter} from "vue-router";
import {PRODUCT_UPDATE_ROUTE} from "@/router/routes/index/index.js";

const router = useRouter()
const {showProductDetail} = inject('productDetail')

const props = defineProps({
  product: {type: Object, default: () => ({})},
  productIdx: {type: Number, default: -1},
})

// 显示商品详细信息
const showDetail = () => {
  showProductDetail(props.productIdx)
}

// 前往修改
const goUpdateProduct = () => {
  router.push({
    name: PRODUCT_UPDATE_ROUTE,
    query: {
      productId: props.product.id
    }
  })
}
</script>

<template>
  <div class="product-card w-96 mb-8">
    <el-card class="box-card w-full">
      <template #header>
        <div class="card-header flex flex-col justify-between">
          <div class="flex justify-between items-start">
            <span class="flex-center">
              <el-text class="product-title" truncated><span class="text-lg">{{ product.title }}</span></el-text>
              <el-tag size="small" type="danger" v-if="product?.isRemove">{{ product?.isRemove ? '已删除' : '未删除' }}</el-tag>
            </span>
            <div>
              <el-button type="info" plain size="small" @click="goUpdateProduct">修改</el-button>
              <el-button type="primary" plain size="small" @click="showDetail">详细信息</el-button>
            </div>
          </div>
          <div class="mt-4">
            <el-tag
                class="mr-1"
                v-for="label in (product.labels.length > 3 ? product.labels.slice(0, 3) : product.labels)"
                :key="label" size="small" type="success"
            >
              <div class="tag-text truncate">{{ label.name }}</div>
            </el-tag>
          </div>
        </div>
      </template>
      <template #default>
        <el-descriptions :column="1" direction="horizontal" border>
          <el-descriptions-item label="ISBN">{{ product.code }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ product.productCategory }}/{{ product.productCategorySub }}</el-descriptions-item>
          <el-descriptions-item label="销量">{{ product.sale }}</el-descriptions-item>
          <el-descriptions-item label="运费">{{ product.freight }} ￥</el-descriptions-item>
          <el-descriptions-item label="发货地">{{ product.delivery }}</el-descriptions-item>
          <el-descriptions-item label="商品选项">
            <div v-for="option in (product.options.length > 1 ? product.options.slice(0, 1): product.options)">
              <el-text class="product-option" truncated>
                {{ option.name }}
              </el-text>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="商品图片" class="desc-item">
            <el-image
                preview-teleported
                class="mr-4"
                v-for="(img, idx) in (product.imgs.length > 2 ? product.imgs.slice(0, 2) : product.imgs)"
                style="width: 100px; height: 100px"
                :src="img.img"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="product.imgs.map(img => img.img)"
                :initial-index="idx"
                fit="cover"
            />
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #footer>Footer content</template>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  min-height: 32.5rem;
}

.product-title {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-option {
  max-width: 12rem;
}

.tag-text {
  max-width: 5rem;
}

.desc-item {
  display: flex;
  align-items: center;
}
</style>